<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>DEMO商城App</title>
  <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <style>
    div.sloading {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      margin-top: 200px;
      position: relative;
    }

    div.sloading span {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
    }

    div.sloading g {
      animation: loading linear 2s infinite;
    }

    @keyframes loading {
      from {
        transform: translate(100px, 100px) rotate(0deg);
      }
      to {
        transform: translate(100px, 100px) rotate(360deg);
      }
    }
  </style>
  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->


  <link href="build/main.css" rel="stylesheet">

  <script>
    (function (d, w, c) {
      w.ChatraID = 'NocfZ25pLrzANdn8R';
      w.ChatraSetup = {
        chatHeight: 500
      };
    })(document, window, 'Chatra');

  </script>
  <script src="assets/js/chatra.js"></script>
  <script>
    (function (d, w) {
      var chatInfo = localStorage.getItem("chatInfo");
      if (chatInfo) {
        chatInfo = JSON.parse(chatInfo);
        if (Chatra) {
          console.log("Chatra is loaded")
          Chatra('updateIntegrationData', {
            name: chatInfo['user_name'],
            phone: chatInfo['phone']
          });
          Chatra('setChatHeight', 500)
          Chatra('setButtonSize', 0)
        }
      }
    })(document, window);

  </script>

</head>

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app>
    <div class="sloading">
      <svg viewBox="-2 -2 204 204">
        <g fill="none" stroke-width="2" transform="translate(100,100)">
          <path d="M 0,-100 A 100,100 0 1 0 0,100" stroke="#44c4fa" />
          <path d="M 0,100 A 100,100 1 0 0 100,0" stroke="url(#gradient)" />
        </g>
      </svg>
      <span>Loading</span>
      <svg width="0" height="0">
        <defs>
          <linearGradient id="gradient" x1="0" y1="1" x2="1" y2="0">
            <stop stop-color="#44c4fa" />
            <stop offset="100%" stop-color="#44c4fa" stop-opacity="0" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  </ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>
</body>

<script>
  window.onload = function () {
    var indexbtn = document.getElementById("chatra");
    // indexbtn && indexbtn.addEventListener('touchstart', touch, false);
    // indexbtn && indexbtn.addEventListener('touchmove', touch, false);
    // indexbtn && indexbtn.addEventListener('touchend', touch, false);
    indexbtn.style.top = - 100 + "px";
    var x, y;

    // function touch(event) {
    //   var event = event || window.event;
    //   switch (event.type) {
    //     case "touchstart":
    //       console.log(event.changedTouches[0]);
    //       x = parseInt(event.touches[0].clientX);
    //       y = parseInt(event.touches[0].clientY);
    //       break;
    //     case "touchend":
    //       console.log(event.changedTouches[0]);
    //       y = parseInt(event.changedTouches[0].clientY);
    //       x = parseInt(event.changedTouches[0].clientX);
    //       indexbtn.style.top = y - 10 + "px"; //50是原始宽度一半，
    //       // indexbtn.style.left = x - 30 + "px";//50是原始高度一半，
    //       break;
    //     case "touchmove":
    //       event.preventDefault();
    //       y = parseInt(event.touches[0].clientY);
    //       x = parseInt(event.touches[0].clientX);
    //       indexbtn.style.top = y - 10 + "px";
    //       // indexbtn.style.left = x - 30 + "px";
    //       break;
    //   }
    // }
  }

</script>

</html>
